<route lang="json">
{
  "style": {
    "navigationBarTitleText": "授权码维护",
    "backgroundColorContent": "#e8e8e8"
  }
}
</route>

<script lang="ts" setup>
// import { useHomeStore } from '@/store'
import mcht from '@/api/mcht'
import dayjs from 'dayjs'

// const {
//   mchtNo,
// } = storeToRefs(useHomeStore())

const form = ref({
  staffId: '',
  mchtNo: '',
  mchtName: '',
  shopId: '',
  shopName: '',
  userTel: '',
  authCodeExpTime: '',
  authCodeGenTime: '',
  returnAuthCode: '',
  returnAuthCodeFlg: '',
})
const employeeList = ref([])
async function getStaffListWithAuthCode () {
  const { data } = await mcht.getStaffListWithAuthCode()
  if (data.status === 'success') {
    employeeList.value = data.data.employeeList.map((employee: any) => {
      return Object.assign(employee, {
        text: `${employee.userTel}-${employee.userName}`,
        value: employee.userId
      })
    })
  }
}
onMounted(async () => {
  await getStaffListWithAuthCode()
})

watch(() => form.value.staffId, async (value: string) => {
  const employee: any = employeeList.value.find((x: any) => x.value === value)
  form.value.mchtNo = employee.mchtNo
  form.value.mchtName = employee.mchtName
  form.value.shopId = employee.shopId
  form.value.shopName = employee.shopName
  form.value.userTel = employee.userTel
  if (employee.returnAuthCode) {
    const { data } = await mcht.getAuthCodeDetail(value)
    if (data.status === 'success') {
      form.value.authCodeExpTime = dayjs(data.data.authCodeExpTime).format('YYYY-MM-DD HH:mm:ss')
      form.value.authCodeGenTime = dayjs(data.data.authCodeGenTime).format('YYYY-MM-DD HH:mm:ss')
      form.value.returnAuthCode = data.data.returnAuthCode
      form.value.returnAuthCodeFlg = {'1': '未使用', '0': '已使用'}[data.data.returnAuthCodeFlg]
    }
  } else {
    const { data } = await mcht.refreshAuthcode(value)
    if (data.status === 'success') {
      form.value.authCodeExpTime = dayjs(data.data.authCodeExpTime).format('YYYY-MM-DD HH:mm:ss')
      form.value.authCodeGenTime = dayjs(data.data.authCodeGenTime).format('YYYY-MM-DD HH:mm:ss')
      form.value.returnAuthCode = data.data.returnAuthCode
      form.value.returnAuthCodeFlg = {'1': '未使用', '0': '已使用'}[data.data.returnAuthCodeFlg]
    }
  }
})

function copyCode () {
  uni.setClipboardData({
    data: form.value.returnAuthCode,
    success: function () {
      uni.showToast({
        icon: 'none',
        title: '内容已复制'
      })
    }
  })
}

async function refresh () {
  uni.showModal({
    title: '刷新确认',
    content: '您是否确认要刷新授权码？',
    success: async (res) => {
      if (res.confirm) {
        // console.log('用户点击确定')
        const { data } = await mcht.refreshAuthcode(form.value.staffId)
        if (data.status === 'success') {
          form.value.authCodeExpTime = dayjs(data.data.authCodeExpTime).format('YYYY-MM-DD HH:mm:ss')
          form.value.authCodeGenTime = dayjs(data.data.authCodeGenTime).format('YYYY-MM-DD HH:mm:ss')
          form.value.returnAuthCode = data.data.returnAuthCode
          form.value.returnAuthCodeFlg = {'1': '未使用', '0': '已使用'}[data.data.returnAuthCodeFlg]
        }
      }
    },
  })
}
</script>

<template>
  <div class="refresh">
    <nut-form>
      <nut-form-item label="员工" custom-class="li-cell-box">
        <option-select v-model="form.staffId" title="员工" :options="employeeList" inputAlign="right" :isSearch="true" />
      </nut-form-item>
      <nut-form-item label="商户编号" v-if="form.mchtNo" custom-class="li-cell-box">
        <nut-input v-model="form.mchtNo" class="nut-input-text" placeholder="请输入商户编号" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="商户名称" v-if="form.mchtName" custom-class="li-cell-box">
        <nut-input v-model="form.mchtName" class="nut-input-text" placeholder="请输入商户名称" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="门店编号" v-if="form.shopId" custom-class="li-cell-box">
        <nut-input v-model="form.shopId" class="nut-input-text" placeholder="请输入门店编号" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="门店名称" v-if="form.shopName" custom-class="li-cell-box">
        <nut-input v-model="form.shopName" class="nut-input-text" placeholder="请输入门店名称" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="员工手机号" v-if="form.userTel" custom-class="li-cell-box">
        <nut-input v-model="form.userTel" class="nut-input-text" placeholder="请输入员工手机号" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="生效时间" v-if="form.authCodeGenTime" custom-class="li-cell-box">
        <nut-input v-model="form.authCodeGenTime" class="nut-input-text" placeholder="请输入生效时间" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="失效时间" v-if="form.authCodeExpTime" custom-class="li-cell-box">
        <nut-input v-model="form.authCodeExpTime" class="nut-input-text" placeholder="请输入失效时间" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="授权码" v-if="form.returnAuthCode" custom-class="li-cell-box">
        <nut-input v-model="form.returnAuthCode" class="nut-input-text" placeholder="请输入授权码" type="text" disabled
          input-align="right">
          <template #right>
            <nut-button type="primary" size="mini" @click="copyCode">复制</nut-button>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item label="使用标识" v-if="form.returnAuthCodeFlg" custom-class="li-cell-box">
        <nut-input v-model="form.returnAuthCodeFlg" class="nut-input-text" placeholder="请输入使用标识" type="text" disabled
          input-align="right" />
      </nut-form-item>
    </nut-form>
    <div class="actions" v-if="form.returnAuthCode">
      <div class="li-btn-tj shake_o" @click="refresh">刷新</div>
      <!-- <nut-button type="primary" block @click="refresh">刷新</nut-button> -->
    </div>
  </div>
</template>

<style lang="sass" scoped>
.refresh
  .actions
    padding: 20px
</style>